'use client'

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { 
  VideoCameraIcon,
  Cog6ToothIcon
} from '@heroicons/react/24/outline'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import type { User } from '@supabase/auth-helpers-nextjs'

const Navbar = () => {
  const pathname = usePathname()
  const router = useRouter()
  const [user, setUser] = useState<User | null>(null)
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const supabase = createClientComponentClient()

  useEffect(() => {
    const getUser = async () => {
      const { data: { user } } = await supabase.auth.getUser()
      setUser(user)
    }

    getUser()

    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null)
    })

    return () => subscription.unsubscribe()
  }, [supabase.auth])

  const handleSignOut = async () => {
    await supabase.auth.signOut()
    router.push('/login')
    router.refresh()
  }

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center">
          {/* Logo和品牌名 */}
          <div className="flex items-center mr-8">
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8">
                <svg viewBox="0 0 24 24" className="w-full h-full text-[#FF3366]">
                  <path
                    fill="currentColor"
                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
                  />
                </svg>
              </div>
              <span className="text-xl font-bold gradient-text">球的 Video</span>
            </Link>
          </div>

          {/* 主导航 */}
          <div className="flex-grow">
            <Link
              href="/products"
              className="inline-flex items-center gap-2 px-4 py-2 text-gray-700 hover:text-[#FF3366] 
                transition-colors duration-200 rounded-lg"
            >
              <svg 
                className="w-5 h-5" 
                viewBox="0 0 24 24" 
                fill="none" 
                stroke="currentColor"
              >
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={1.5}
                  d="M7 4v16m0-8h10m0-8v16"
                />
              </svg>
              <span>产品功能</span>
            </Link>
          </div>

          {/* 用户菜单 */}
          <div className="flex items-center space-x-4">
            {user ? (
              <div className="relative">
                <button
                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                  className="flex items-center space-x-2 text-gray-700 hover:text-[#FF3366] 
                    transition-colors duration-200 px-3 py-2 rounded-lg"
                >
                  <div className="w-8 h-8 rounded-full bg-gradient-to-r from-[#FF3366] to-[#6236FF] 
                    flex items-center justify-center text-white">
                    {user.email?.[0].toUpperCase()}
                  </div>
                  <span className="text-sm font-medium hidden sm:inline-block">{user.email}</span>
                </button>

                {/* 下拉菜单 */}
                {isDropdownOpen && (
                  <div className="absolute right-0 mt-2 w-48 rounded-xl shadow-lg bg-white/80 
                    backdrop-blur-md ring-1 ring-black ring-opacity-5 animate-fadeIn">
                    <div className="py-1">
                      <Link
                        href="/profile"
                        className="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 
                          hover:bg-gray-50 transition-colors duration-200"
                        onClick={() => setIsDropdownOpen(false)}
                      >
                        <Cog6ToothIcon className="h-5 w-5" />
                        <span>账号设置</span>
                      </Link>
                      <button
                        onClick={handleSignOut}
                        className="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 
                          hover:bg-red-50 transition-colors duration-200"
                      >
                        <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                            d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                        </svg>
                        <span>退出登录</span>
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <>
                <Link
                  href="/login"
                  className="text-gray-700 hover:text-[#FF3366] px-4 py-2 rounded-lg 
                    transition-colors duration-200"
                >
                  登录
                </Link>
                <Link
                  href="/signup"
                  className="btn-primary"
                >
                  免费注册
                </Link>
              </>
            )}
          </div>
        </div>
      </div>
    </nav>
  )
}

export default Navbar 